<template>
  <base-modal :title="$t('performance.title.calculationMethod')" :show.sync="visible" width="600px" class="choose-team-user-options-modal">

    <!-- start 重复人员列表 -->
    <div v-if="repeatNameList.length > 0" class="choose-team-user-options-modal-list">
      {{$t('performance.label.duplicateMembers')}}: <br>
      <template v-if="isOpenData">
        <open-data v-for="item in repeatUserList" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
      </template>
      <template v-else>
        {{ repeatNameList.join('，') }}
      </template>
    </div>
    <!-- end 重复人员列表 -->
    
    <div class="choose-team-user-options-modal-btns">
      <base-button type="primary" @event="choose('onlyParent')">{{$t('performance.button.onlyCalculateParent')}}</base-button>
      <base-button type="primary" @event="choose('repeat')">{{$t('performance.button.includeAllMembers')}}</base-button>
      <base-button type="danger" @event="choose('cancel')">{{$t('common.base.cancel')}}</base-button>

    </div>
  
    <div slot="footer" class="export-footer">
      
    </div>
  </base-modal>
</template>

<script>
export default {
  name: 'choose-team-user-options-dialog',
  props: {
    value: {
      type: String,
      default: '',
    }
  },
  data() {
    return {
      repeatNameList: [],
      repeatUserList: [],
      visible: false,
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    choose(type) {
      this.$emit('input', type);
      this.$emit('update', type);
      this.visible = false;
    },
    show(repeatNameList = [], repeatUserList = []) {
      this.visible = true;
      this.repeatNameList = repeatNameList;
      this.repeatUserList = repeatUserList
    }
  },
}
</script>

<style lang='scss'>
.choose-team-user-options-modal {
  .base-modal  {
    margin-top: 200px;
    position: relative;
    right: 4px;
  }

  .base-modal-body {
    padding: 15px 15px 0 15px;
  }

  .base-modal-header-close {
    display: none;
  }

}

.choose-team-user-options-modal-list {
  line-height: 30px;
  padding-bottom: 20px;
}

.choose-team-user-options-modal-btns {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}
</style>